/**
 * 页面
 *  1. 页面模板还是需要使用内置的那些 View、Text 等组件，并且由于是 React 语言，组件需要大驼峰写法。这些组件还需要从 @tarojs/components 包中导入。
 *
 *  2. 需要导出一个 React 组件
 *
 *  3. 通过 @tarojs/taro 包中可以导入封装到的 hooks useLoad、useDidShow、useDidHide、useReady ...
 *
 *    onLoad    => useLoad
 *    onShow    => useDidShow
 *    onHide    => useDidHide
 *    onRead    => useReady
 *    onUnload  => useUnload
 *
 *    onShareAppMessage => useShareAppMessage
 *    onPullDownRefresh => usePullDownRefresh
 *    onReachBottom     => useReachBottom
 *    ...
 *
 *  4. 页面样式，需要自行引入
 *    - 小程序端，页面之间的样式是自动隔离的。
 *    - H5端的话，没有自动隔离，需要弄 CssModule 的方式来处理即可。
 *    - 样式直接使用 px 单位即可。（设计稿的标准需要使用 750）
 *        - 小程序端，会自动转换成 rpx
 *        - H5端，会自动转换成 rem 单位
 *        PS: 如果设计稿的基准不是 750 而是 640 的话，需要到 config/index.js 中配置
 *
 */
import { useState } from "react";
import {
  View,
  Text,
  Navigator,
  Button,
  CommonEventFunction,
  ButtonProps,
  BaseEventOrig,
} from "@tarojs/components";
import { useLoad, pxTransform } from "@tarojs/taro";

import "./index.scss";

export default function Index() {
  const [count, setCount] = useState(1);

  const increment = () => {
    setCount(count + 1);
  };

  const add = (num: number) => {
    setCount(count + num);
  };

  // const handleGetUserInfo: CommonEventFunction<
  //   ButtonProps.onGetUserInfoEventDetail
  // > = (e) => {
  //   console.log("e", e);
  // };

  const handleGetUserInfo = (
    e: BaseEventOrig<ButtonProps.onGetUserInfoEventDetail>
  ) => {
    console.log("e", e.detail.userInfo);
  };

  useLoad(() => {
    console.log("Page loaded.");
  });

  // return 的内容，就是页面的模板
  return (
    <View className='index'>
      <Text>Hello Taro!!</Text>

      <Button onClick={increment}>{count}</Button>

      <Button onClick={() => add(10)}>{count} + 10</Button>

      <Button onClick={() => add(20)}>{count} + 20</Button>

      {/* Button 的 open-type */}
      <Button openType='getUserInfo' onGetUserInfo={handleGetUserInfo}>
        获取用户信息
      </Button>

      {/* 
        行内样式，不会自动转换成 rpx 或 rem，如果需要转换，可以使用 Taro.pxTransform
      */}
      <View
        style={{
          width: pxTransform(100),
          height: pxTransform(100),
          backgroundColor: "red",
        }}
      ></View>

      <Navigator url='/pages/about/index'>去 About</Navigator>
    </View>
  );
}
